{extend name="layout/layout" /}

{block name="pagecss"}
<style>
    .images-row .thumbnail {
        width: 220px;
        height: 220px;
    }
    .images-row .image {
        position: relative;
    }
    .images-row .image .del-icon {
        color: red;
        position: absolute;
        top: 197px;
        right: 26px;
    }
</style>
{/block}

{block name="content"}
<div class="row js-check-wrap">
    <div class="col-lg-12">
        <div class="box box-success">
            <div class="box-header with-border">
                {include file="common:search" /}
                <div class="box-tools pull-right">
                    <button class="btn btn-primary btn-sm add-btn" data-href="{:url('admin/'.strtolower($model).'/add')}" data-title="添加图片"><i class="fa fa-plus"></i> 添加</button>
                </div>
            </div>
            <div class="box-body ">
                <form class="js-ajax-form" method="post">
                    <div class="row images-row">
                        {foreach $datas as $data}
                        <div class="col-xs-6 col-sm-4 col-md-2 image">
                            <a href="{$data->imgUrl}" target="_blank">
                                <img src="{$data->imgUrl}" class="thumbnail img-responsive" alt="">
                            </a>
                            <a href="{:url('admin/'.strtolower($model).'/delete', ['id' => $data->id])}" class="del" data-confirm="是否要删除这条记录？" data-title="请确认" data-confirmbtn="确定" data-cancelbtn="取消" style="display: none;">
                                <span class="del-icon"><i class="fa fa-trash"></i></span>
                            </a>
                        </div>
                        {/foreach}
                    </div>
                </form>
            </div>
            <div class="box-footer">
                {include file="common:paginate" /}
            </div>
        </div>
    </div>
</div>
{/block}

{block name="pagescript"}
<script>
    $('.add-btn').on('click', function(){
        var url = $(this).data('href');
        var title = $(this).attr('data-title');
        var option = {
            area: ['600px', '400px']
        };
        open_iframe_layer(url, title, option);
    });

    /**
     * 显示删除按钮
     */
    $('.image').on({
        mouseenter: function () {
            $(this).find('.del').show();
        },
        mouseleave: function () {
            $(this).find('.del').hide();
        },
    });
</script>
{/block}